<template>
  <a-form
    class="login-form"
    ref="loginForm"
    :model="formState"
    :rules="rules"
    autocomplete="off"
    @finish="handleLogin"
  >
    <a-form-item name="username">
      <a-input
        v-model:value="formState.username"
        placeholder="请输入用户名"
        :maxlength="30"
        allowClear
      >
        <template #prefix>
          <User theme="outline" size="18" fill="#ccc" />
        </template>
      </a-input>
    </a-form-item>
    <a-form-item name="password">
      <a-input-password
        type="password"
        v-model:value="formState.password"
        :maxlength="30"
        placeholder="请输入密码"
        allowClear
      >
        <template #prefix>
          <Lock theme="outline" size="18" fill="#ccc" />
        </template>
        <i class="a-icon-view a-input__icon" slot="suffix" @click="showPassword"></i>
      </a-input-password>
    </a-form-item>
    <a-form-item name="code">
      <a-row :span="24">
        <a-col :span="16">
          <a-input
            v-model:value="formState.code"
            :maxlength="code.len"
            placeholder="请输入验证码"
            allowClear
          >
            <template #prefix>
              <Protect theme="outline" size="18" fill="#ccc" />
            </template>
            <i slot="prefix" class="icon-yanzhengma"></i>
          </a-input>
        </a-col>
        <a-col :span="8">
          <div class="login-code">
            <span class="login-code-img" @click="refreshCode" v-if="code.type == 'text'">
              {{ code.value }}
            </span>
            <img :src="codeSrc" class="login-code-img" @click="refreshCode" v-else />
          </div>
        </a-col>
      </a-row>
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit" ghost class="login-submit"> 登录 </a-button>
    </a-form-item>
  </a-form>
</template>

<script setup>
import { randomString } from '@/utils';
import { User, Lock, Protect } from '@icon-park/vue-next';
import { useUserInfo } from '@/store/userInfo';

const formState = reactive({
  username: '',
  password: '',
  code: '',
  randomStr: '',
});

const code = reactive({
  src: '/tsp-api/code',
  value: '',
  len: 4,
  type: 'image',
});

const codeSrc = computed(() => `${code.src}?randomStr=${formState.randomStr}`);

const rules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度最少为6位', trigger: 'blur' },
  ],
  code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
};

// 刷新验证码
const refreshCode = () => {
  formState.code = '';
  formState.randomStr = randomString(code.len, true);
  code.type === 'text' ? (code.value = randomString(code.len)) : null;
};
onBeforeMount(() => {
  refreshCode();
});

const { login, queryUserInfo } = useUserInfo();
const router = useRouter();
const handleLogin = () => {
  login(formState).then(() => {
    queryUserInfo();
    router.push('/');
  });
};
</script>

<style lang="scss" scoped>
.login-form {
  margin: 10px 0;
  i {
    color: #333;
  }

  :deep .ant-form-item {
    .ant-input-affix-wrapper {
      height: $width40;
      .ant-input {
        padding-left: $width10;
      }
    }
  }
  .login-code {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin: 0 0 0 10px;
  }
  .login-code-img {
    width: 100px;
    height: 38px;
    background-color: #fdfdfd;
    border: 1px solid #f0f0f0;
    color: #333;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 5px;
    line-height: 38px;
    text-indent: 5px;
    text-align: center;
    cursor: pointer;
  }
  .login-title {
    color: #000;
    margin-bottom: 50px;
    font-weight: bold;
    font-size: 28px;
    text-align: center;
    letter-spacing: 4px;
  }
  .login-menu {
    margin-top: 40px;
    width: 100%;
    text-align: center;
    a {
      color: #999;
      font-size: 12px;
      margin: 0px 8px;
    }
  }
  .login-submit {
    width: 100%;
    height: 45px;
    margin-top: 30px;
    font-size: 18px;
    letter-spacing: 2px;
    font-weight: 300;
    &:hover {
      color: $white;
      background-color: $primary;
    }
  }
}
</style>
